<template>
	<view class="page_scroll_view">
		<tn-navbar fixed :bottom-shadow="false">售卖详情</tn-navbar>
		<tn-sticky>
			<view>
				<view class="tn-flex items-center tn-p-sm">
					<tn-title title="售卖统计" mode="vLine" assist-color="tn-blue" />
				</view>
				<view class="monetary_gain tn-p-sm">
					<view class="tn-flex tn-p-sm items-center tn-gray-light_bg tn-radius">
						<view class="tn-round tn-flex tn-flex-center tn-mr-sm tn-type-primary_bg"
							style="width: 80rpx;height: 80rpx;">
							<image src="/static/home/dice.png" style="width: 50%;height: auto;" mode="widthFix">
							</image>
						</view>
						<view>
							<view>
								<tn-count-scroll :value="totalRevenue" font-size="36" />
								<text class="tn-text-xs tn-text-gray tn-ml-xs">元</text>
							</view>
						</view>
					</view>
					<view class="tn-flex tn-p-sm items-center tn-gray-light_bg tn-radius">
						<view class="tn-round tn-flex tn-flex-center tn-mr-sm tn-type-success_bg"
							style="width: 80rpx;height: 80rpx;">
							<image src="/static/home/dice.png" style="width: 50%;height: auto;" mode="widthFix">
							</image>
						</view>
						<view>
							<view>
								<tn-count-scroll :value="monthlyIncome" font-size="36" />
								<text class="tn-text-xs tn-text-gray tn-ml-xs">元</text>
							</view>
						</view>
					</view>
				</view>
				<view class="tn-flex justify-around">
					<view class="tn-flex-center-center">
						<view class="tn-type-primary_bg tn-round" style="width: 20rpx;height: 20rpx;"></view>
						<text class="tn-text-xs tn-ml-xs">总售卖数</text>
					</view>
					<view class="tn-flex-center-center">
						<view class="tn-type-success_bg tn-round" style="width: 20rpx;height: 20rpx;"></view>
						<text class="tn-text-xs tn-ml-xs">月售卖数</text>
					</view>
				</view>
			</view>
			<view @click="openDateTimePicker=true" class="tn-flex items-center justify-between tn-p">
				<view class="tn-flex items-center">
					<tn-icon name="order" />
					<text class="tn-ml-xs">请选择查询日期 （ {{pageParams.dateTime}} ）</text>
				</view>
				<tn-icon class="tn-text-right" type="info" name="right" />
			</view>
			<view class="tn-p-sm tn-pl tn-gray-light_bg">
				<text>共 {{total}} 条记录</text>
			</view>
		</tn-sticky>
		<loading v-if="isLoading" style="height: 60vh;"></loading>
		<view class="empty" style="height: 60vh;" v-else-if="sellList.length == 0">
			<image
				src="https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2025/02/a0c4966b-11af-4c87-93aa-359f9c03d89f83ee61eba8e363790692eb5fd8a98de7.png"
				mode="widthFix"></image>
			<text>这里空空荡荡，啥也没有留下</text>
		</view>
		<scroll-view scroll-y="true" v-else>
			<view>
				<view v-for="(item,index) in sellList" :key="index"
					class="tn-flex items-center justify-between tn-p tn-pb-sm">
					<view class="tn-flex items-center">
						<tn-avatar
							:url="item.avatar?item.avatar:'https://sgymv1.oss-cn-beijing.aliyuncs.com/sgym/avatar/admin/2024/11/9ccf98d5-b98d-4371-aeda-4cc50314d4e7453ab7651200438c6997a0665aec4063.png'"
							size="xl" />
						<view class="tn-ml-sm tn-flex tn-flex-column tn-text-xs">
							<text>下单商品：{{item.productName}}</text>
							<text style="margin-top:1rpx">商品售价：{{item.orderAmountTotal}} 元</text>
							<text style="margin-top:1rpx">手机号码：{{item.mobile?item.mobile:'暂未绑定手机号'}}</text>
							<text style="margin-top:1rpx">下单日期：{{item.orderPayTime}}</text>
						</view>
					</view>
					<tn-icon class="tn-text-right" type="info" name="right" />
				</view>
				<view class="tn-pt-sm tn-pb-sm tn-flex-center">
					<uni-pagination :total="total" :current="pageParams.current" :pageSize="pageParams.size"
						@change="changePage" />
				</view>
			</view>
		</scroll-view>
	</view>
	<tn-date-time-picker v-model="pageParams.dateTime" format="YYYY-MM" v-model:open="openDateTimePicker"
		mode="yearmonth" @confirm="getSellDetail" />
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app"
	import { getSellDetailApi } from "@/request/home";

	onLoad((e) => {
		const date = new Date()
		pageParams.value.userType = e.type
		pageParams.value.dateTime = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`
		getSellDetail()
	})

	const openDateTimePicker = ref(false)
	const isLoading = ref(true)
	const pageParams = ref({
		userType: 0,
		dateTime: "2025-05",
		current: 1,
		size: 10
	})
	const total = ref(0)
	const sellList = ref([])
	const monthlyIncome = ref(0)
	const totalRevenue = ref(0)

	// 获取售卖详情
	const getSellDetail = () => {
		isLoading.value = true
		getSellDetailApi(pageParams.value).then(res => {
			if (res.code == 0) {
				sellList.value = res.result.billList
				total.value = res.result.billList.length
				monthlyIncome.value = res.result.monthlyIncome
				totalRevenue.value = res.result.totalRevenue
				setTimeout(() => {
					isLoading.value = false
				}, 500)
			}
		})
	}
	// 更新页码
	const changePage = (e : any) => {
		pageParams.value.current = e.current
		getSellDetail()
	}
</script>

<style scoped lang="scss">
	.monetary_gain {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
	}
</style>